<template>
  <div class="hm-posts" @click="handleClick">
      <!-- 视频 -->
      <div class="video-post" v-if="post.type===2">
          <div class="title txt-cut">{{ post.title }}</div>
          <div class="video-box">
              <img :src="post.cover[0].url" alt="">
              <i class="iconfont iconshipin"></i>
          </div>
          <div class="bottom">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comment_length }}跟帖</span>
      </div>
      </div>
      <!-- 单图片 -->
    <div class="single-img-post" :key="post.id" v-else-if="post.cover.length<3">
      <div class="info">
        <div class="title txt-cut">{{ post.title }}</div>
        <div class="bottom">
          <span>{{ post.user.nickname }}</span>
          <span>{{ post.comment_length }}跟帖</span>
        </div>
      </div>
      <div class="img-box">
        <img :src="post.cover[0].url" alt="">
      </div>
    </div>
    <!-- 三图片 -->
    <div class="multiple-img-post" v-else>
        <div class="title txt-cut" >{{ post.title }}</div>
        <div class="imgs">
             <img v-for="item in post.cover" :key="item.id" :src="item.url" alt="">
        </div>
     <div class="bottom">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comment_length }}跟帖</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    post: {
      type: Object
    }
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.single-img-post {
     display: flex;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 14px;

      }
      .bottom {
        color: #888;
        span:first-child {
          margin-right: 10px;
        }
      }
    }
    .img-box {
      width: 120px;
      height: 75px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover; // 铺满，不留白   contain 包含
      }
    }
}

.multiple-img-post {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  .imgs {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    img {
      width: 112px;
      height: 74px;
      object-fit: cover;
    }
  }
    .bottom {
        color: #888;
        span:first-child {
          margin-right: 10px;
        }
      }
}
.video-post {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .video-box {
        padding: 10px 0;
        position: relative;
        .iconshipin {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 45px;
            border-radius: 50%;
            color: rgba(255,255,255, 0.8);
            background-color: rgba(0,0,0,0.3);
            position: absolute;
            top: 38%;
            left: 44%;
            transform: translate3d(-50%, -50%)
        }
    }
      .bottom {
        color: #888;
        span:first-child {
          margin-right: 10px;
        }
      }
}

</style>
